<!doctype html>
<html lang="en-US" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>猫眼电影数据分析系统</title>
    {#    <link rel="apple-touch-icon" sizes="180x180" href="/static/static/img/favicons/apple-touch-icon.png">#}
    {#    <link rel="icon" type="image/png" sizes="32x32" href="/static/static/img/favicons/favicon-32x32.png">#}
    <link rel="icon" type="image/png" sizes="16x16" href="/static/static/picture/bitbucket.png">
    {#    <link rel="shortcut icon" type="image/x-icon" href="/static/static/img/favicons/favicon.ico">#}
    <link rel="manifest" href="/static/static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="/static/static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="/static/static/css/css2.css" rel="stylesheet">
    <link href="/static/static/css/css21.css" rel="stylesheet">
    <link href="/static/static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
        body {
            opacity: 0;
        }
    </style>
</head>

<body>
<main class="main" id="top">
    <div class="container-fluid px-0">
        <nav class="navbar navbar-light navbar-vertical navbar-vibrant navbar-expand-lg">
            <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
                <div class="navbar-vertical-content scrollbar">
                    <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                        {#                <li class="nav-item"><a class="nav-link active" href="">#}
                        {#                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">类型分析</span></div>#}
                        {#                  </a></li>#}
                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据分析可视化</p>
                            <a class="nav-link " href="/myApp/chartOne/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="layers"></span></span><span class="nav-link-text">类型分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/rateChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="cast"></span></span><span class="nav-link-text">评分分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/timeChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="watch"></span></span><span class="nav-link-text">时间分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/boxChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="life-buoy"></span></span><span
                                        class="nav-link-text">票房分析</span></div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据总览</p>
                            <a class="nav-link " href="/myApp/tableData/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="columns"></span></span><span
                                        class="nav-link-text">电影数据浏览</span></div>
                            </a>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">个人信息</p>
                            <a class="nav-link " href="/myApp/changeInfo/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="user"></span></span><span
                                        class="nav-link-text">个人信息修改</span></div>
                            </a>
                            <a class="nav-link " href="/myApp/collectData/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="heart"></span></span><span class="nav-link-text">个人收藏</span>
                                </div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">预测</p>
                            <a class="nav-link active" href="/myApp/predict/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="flag"></span></span><span class="nav-link-text">票房预测</span>
                                </div>
                            </a>


                        </li>
                        <li class="nav-item">
                            <p class="navbar-vertical-label">推荐</p>
                            <a class="nav-link " href="/myApp/recommendation/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="star"></span></span><span class="nav-link-text">电影推荐</span>
                                </div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据词云图</p>
                            <a class="nav-link dropdown-indicator active" href="#errors" role="button"
                               data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                                <div class="d-flex align-items-center">
                                    <div class="dropdown-indicator-icon d-flex flex-center"><span
                                            class="fas fa-caret-right fs-0"></span></div>
                                    <span class="nav-link-icon"><span data-feather="alert-cloud"></span></span><span
                                        class="nav-link-text">词云图</span>
                                </div>
                            </a>
                            <ul class="nav collapse parent" id="errors">
                                <li class="nav-item"><a class="nav-link " href="/myApp/movieCloud/" data-bs-toggle=""
                                                        aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">电影词云图</span>
                                    </div>
                                </a></li>
                                <li class="nav-item"><a class="nav-link " href="/myApp/actorCloud/" data-bs-toggle=""
                                                        aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">演员词云图</span>
                                    </div>
                                </a></li>
                            </ul>

                        </li>
                    </ul>
                </div>
                {#            <div class="navbar-vertical-footer"><a class="btn btn-link border-0 fw-semi-bold d-flex ps-0" href="#!"><span class="navbar-vertical-footer-icon" data-feather="log-out"></span><span>Settings</span></a></div>#}
            </div>
        </nav>
        <nav class="navbar navbar-light navbar-top navbar-expand">
            <div class="navbar-logo">
                <button class="btn navbar-toggler navbar-toggler-humburger-icon" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse"
                        aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span
                        class="toggle-line"></span></span></button>
                <a class="navbar-brand me-1 me-sm-3" href="">
                    <div class="d-flex align-items-center">
                        <div class="d-flex align-items-center"><img src="/static/static/picture/bitbucket.png"
                                                                    alt="phoenix" width="32">
                            <p class="logo-text ms-2 d-none d-sm-block" style="font-size: 17px">猫眼电影数据分析系统</p>
                        </div>
                    </div>
                </a></div>
            <div class="collapse navbar-collapse">
                <div class="search-box d-none d-lg-block">
                    {#              <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control form-control-sm search-input search min-h-auto" type="search" placeholder="Search..." aria-label="Search"> <span class="fas fa-search search-box-icon"></span></form>#}
                </div>
                <ul class="navbar-nav navbar-nav-icons ms-auto flex-row">
                    {#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNotification" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="bell" style="height:20px;width:20px;"></span></a></li>#}
                    {#              <li class="nav-item dropdown"><a class="nav-link notification-indicator notification-indicator-primary" id="navbarDropdownSettings" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="settings" style="height:20px;width:20px;"></span></a></li>#}
                    {#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">#}
                    {#                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                  </svg></a>#}
                    <div class="dropdown-menu dropdown-menu-end py-0 dropdown-nide-dots shadow border border-300"
                         aria-labelledby="navbarDropdownNindeDots">
                        <div class="card bg-white position-relative border-0">
                            <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                                <div class="row text-center align-items-center gx-0 gy-0">
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/behance.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Behance</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-cloud.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Cloud</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/slack.png" alt=""
                                                                           width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Slack</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/github.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Github</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/bitbucket.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">BitBucket</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-drive.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Drive</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/trello.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Trello</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/figma.png" alt=""
                                                                           width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Figma</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/twitter.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Twitter</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/pinterest.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Pinterest</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/linkedin.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Linkedin</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-maps.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Maps</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img
                                            src="/static/static/picture/google-photos.png" alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Photos</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/spotify.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Spotify</p>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </li>
                    <li class="nav-item dropdown"><a class="nav-link lh-1 px-0 ms-5" id="navbarDropdownUser" href="#"
                                                     role="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false">
                        <div class="avatar avatar-l"><img class="rounded-circle" src="/static/static/picture/57.png"
                                                          alt=""></div>
                    </a>
                        <div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300"
                             aria-labelledby="navbarDropdownUser">
                            <div class="card bg-white position-relative border-0">
                                <div class="card-body p-0 overflow-auto scrollbar" style="height: 18rem;">
                                    <div class="text-center pt-4 pb-3">
                                        <div class="avatar avatar-xl"><img class="rounded-circle"
                                                                           src="/static/static/picture/57.png" alt="">
                                        </div>
                                        <h6 class="mt-2">{{ userInfo.username }}</h6>
                                    </div>
                                    {#                      <div class="mb-3 mx-3"><input class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="Update your status"></div>#}
                                    <ul class="nav d-flex flex-column mb-2 pb-1">
                                        <li class="nav-item"><a class="nav-link px-3" href="/myApp/index/"><span
                                                class="me-2 text-900" data-feather="cast"></span>查看大屏</a></li>
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="settings"></span>Settings &amp; Privacy</a></li>#}
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="help-circle"></span>Help Center</a></li>#}
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="globe"></span>Language</a></li>#}
                                    </ul>
                                </div>
                                <div class="card-footer p-0 border-top">
                                    {#                      <ul class="nav d-flex flex-column my-3">#}
                                    {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user-plus"></span>Add another account</a></li>#}
                                    {#                      </ul>#}
                                    {#                      <hr>#}
                                    <div class="px-3"><a class="btn btn-phoenix-secondary d-flex flex-center w-100"
                                                         href="/myApp/logOut/"><span class="me-2"
                                                                                     data-feather="log-out"></span>退出登录</a>
                                    </div>
                                    {#                      <div class="my-2 text-center fw-bold fs--2 text-600"><a class="text-600 me-1" href="#!">Privacy policy</a>&bull;<a class="text-600 mx-1" href="#!">Terms</a>&bull;<a class="text-600 ms-1" href="#!">Cookies</a></div>#}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="content pt-5">
            <div class="pb-5">
                <div class="row g-5">
                    <!-- 标题部分 -->
                    <div class="col-12 col-xxl-12">
                        <div class="mb-8">
                            <h2 class="mb-2">电影推荐</h2>
                        </div>
                        <hr class="bg-200 mb-6 mt-4">
                    </div>

                    <!-- 推荐内容部分 -->
                    <div class="col-12 col-xxl-12">
                        <div class="row">
                            {% if recommendData %}
                                {% for i in recommendData %}
                                    <div class="col-lg-6 mb-4">
                                        <div class="card" style="width:32rem;">
                                            <div class="row g-0">
                                                <div class="col-md-4">
                                                    <img class="img-fluid rounded-start" src="{{ i.1 }}" alt="Movie Image">
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="card-body">
                                                        <h4 class="card-title">{{ i.0 }}</h4>
                                                        <p class="card-text" style="height: 200px; display: block; overflow: hidden;">
                                                            {{ i.7 }}
                                                        </p>
                                                        <p class="card-text">
                                                            <small class="text-muted">{{ i.5 }}</small>
                                                            <span class="text-muted">时长: {{ i.4 }}</span>
                                                            <span class="text-info">类型: {{ i.2 }}</span>
                                                        </p>
                                                        <a href="/myApp/addHistory/{{ i.13 }}" class="btn btn-primary">收藏</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <h1 style="text-align: center">暂无数据~</h1>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</main>
<script src="/static/static/js/phoenix.js"></script>
<script src="/static/static/js/ecommerce-dashboard.js"></script>
{#  	<div style="display:none;"><a href="#">网站模板</a></div>#}
<script src="/static/static/echarts.js"></script>

<script>
    var chartDom = document.getElementById('mainC');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        "dataZoom": [
            {
                type: 'slider',
                start: 0,
                end: 15
            }
        ],
        "backgroundColor": "#fff",
        "tooltip": {
            "trigger": "axis",
            "formatter": "{b}<br />  {c}万"
        },
        "grid": {
            "show": true,
            "borderColor": "#fff",
            "borderWidth": 4,
            "top": "10%",
            "bottom": "10%",
            "left": "10%",
            "right": "10%"
        },
        "legend": {
            "data": ["票房"],
            "right": "10%",
            "top": "5%",
            "textStyle": {
                "color": "#2d5094",
                "fontSize": 16,
            }
        },
        "xAxis": {
            "data": {{ mYearX | safe }},       //横坐标
            "axisLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "show": true,
                "interval": 0,
                "rotate": 45,
                "color": "#2d5094",
                "fontFamily": "Microsoft YaHei",
                "fontSize": 12
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": "#fff",
                    "width": 4
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": ["rgba(190,224,255,0.5)"]
                }
            }
        },
        "yAxis": {
            {#"max":100,#}
            "axisLine": {
                "show": false
            },
            "axisTick": {
                "show": true,
                "length": 15,
                "lineStyle": {
                    "color": "#2d5094"
                }

            },
            "axisLabel": {
                "show": true,
                "color": "#2d5094",
                "fontFamily": "Microsoft YaHei",
                "margin": 18,
                "fontSize": 12
            },
            "splitLine": {
                "show": false
            },
            "splitArea": {
                "show": false
            }
        },
        "series": [{
            "name": '票房',
            "data": {{ mYearY }},        //数据
            "type": 'bar',
            "barWidth": "96%",
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#1690e3'},
                            {offset: 0.5, color: '#1666c5'},
                            {offset: 1, color: '#2d5094'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2d5094'},
                            {offset: 0.5, color: '#1666c5'},
                            {offset: 1, color: '#1690e3'},
                        ]
                    )
                }
            },
            "label": {
                "show": true,
                "position": "top",
                "formatter": ["{f1|{c}}", "{f2|万}"].join(' '),
                "rich": {
                    "f1": {
                        "color": "#2d5094",
                        "fontSize": 16,
                        "fontFamily": "Microsoft YaHei"
                    },
                    "f2": {
                        "color": "#2d5094",
                        "fontSize": 10,
                        "fontFamily": "Microsoft YaHei",
                        "verticalAlign": "bottom"
                    }
                }
            }

        }]
    };


    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainB');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        grid: {
            left: 60,
            right: 50,
            top: 60,
            bottom: 30,
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 30
            }
        ],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {{ mTypeBoxX | safe }}
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value} 万'
            }
        },
        series: [{
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            data: {{ mTypeBoxY }},
            type: 'line',
            // showSymbol: false,
            // smooth: true,
            symbol: 'diamond',
            symbolSize: 15,
            itemStyle: {
                normal: {
                    color: "#1c7bf0"
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1c7bf0'
                    }, {
                        offset: 1,
                        color: '#fff'
                    }])
                }
            },
        }]
    }

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainD');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        color: ['#00DDFF',],
        title: {
            {#text: 'Gradient Stacked Area Chart'#}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['票房',]
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {{ mCountryBoxX | safe }}
            }
        ],
        yAxis: [
            {
                name: '单位(万)',
                type: 'value'
            }
        ],
        series: [

            {
                name: '票房',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(77, 119, 255)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: {{ mCountryBoxY }}
            },


        ]
    };
    option && myChart.setOption(option);
</script>
</body>
<script>
    function typeChange(e) {
        location.href = 'http://127.0.0.1:8000/myApp/chartOne?typeName=' + e.target.value
    }
</script>
</html>